<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Test 3 | page1 </title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/adminlte.min.css">
</head>
<body class="hold-transition">
<div class="wrapper" id="test1App">

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">待办添加页</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#" @click="indexPage">主页</a></li>
              <li class="breadcrumb-item active">待办添加</li>
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->


    <!-- Main content -->
    <section class="content">
      <div class="container-fluid">

        <div class="row">
          <div class="col-12">
            <div class="card">
              <div class="card-header"> 
                <h2 class="card-title">
                  <!-- Responsive Hover Table  --> 
                  <span>
                  <select v-model="project1" @change="changeIndex" 
                    class="custom-select form-control-border" id="exampleSelect1">
                    <option v-for="(item1,index) in proList1" :key="index">
                      {{item1}}
                    </option>
<!-- <option>项目 1</option><option>项目 2</option><option>项目 3</option> -->
                  </select>
                  </span>
                </h2>
                
                <div class="card-tools">
                  <div class="input-group input-group-sm" style="width: 150px;">
                    <input type="text" name="table_search" class="form-control float-right" placeholder="Search">

                    <div class="input-group-append">
                      <button type="submit" class="btn btn-default">
                        <i class="fas fa-search"></i>
                      </button>
                    </div>
                    <div class="input-group-append">&nbsp;</div>
                    <div class="input-group-append" alt="添加" >
                      <button @click="addItem" class="btn btn-default">
                        <i alt="添加" class="fas fa-plus"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body table-responsive p-0">
                <table class="table table-hover text-nowrap">
                  <thead>
                    <tr>
                      <th>编号</th>
                      <th>待办项</th>
                      <th>类型</th>
                      <th>日期</th>
                      <th>状态</th>
                      <th>操作</th>
                    </tr>
                  </thead>
                  <tbody>

                    <tr v-for="(item2,index) in itemList1" :key="index">
                      <td width="250px">{{ item2.id }}</td>
                      <td>{{item2.name}}</td>
                      <td><span class="tag tag-success">{{ item2.type1 }}</span></td>
                      <td>{{ item2.date1 }}</td>
                      <td>{{ getStatusName(item2.status) }} </td>
                      <td>
                        <a href="#" @click="edit(item2.id)">编辑</a>|
                        <a href="#" @click="del1(item2.id)">删除</a>
                      </td>
                    </tr>
                  <!--
                    <tr>
                      <td>183</td>
                      <td>创建概述</td>
                      <td><span class="tag tag-success">仅标题</span></td>
                      <td>11-7-2014</td>
                      <td>想做 </td>
                      <td>编辑|删除</td>
                    </tr>
                    <tr>
                      <td>219</td>
                      <td>设计APP</td>
                      <td><span class="tag tag-warning">多选项</span></td>
                      <td>11-7-2014</td>
                      <td>想做 </td>
                      <td>编辑|删除</td>
                    </tr>
                    <tr>
                      <td>657</td>
                      <td>界面设计</td>
                      <td><span class="tag tag-primary">有内容</span></td>
                      <td>11-7-2014</td>
                      <td>想做 </td>
                      <td>编辑|删除</td>
                    </tr>
                    <tr>
                      <td>175</td>
                      <td>BUG报告</td>
                      <td><span class="tag tag-danger">仅标题</span></td>
                      <td>11-7-2014</td>
                      <td>想做 </td>
                      <td>编辑|删除</td>
                    </tr>
                    -->
                  </tbody>
                </table>
              </div>
              <!-- /.card-body -->
            </div>
            <!-- /.card -->
          </div>
        </div>
        <!-- /.row -->

      </div><!-- /.container-fluid -->
    </section>
    <!-- /.content --> 

  </div>
  <!-- /.content-wrapper -->



  <!-- modal -->
  <div class="modal fade" id="modal-addItem">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">
            <!-- Default Modal -->
            新增代办事项
          </h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <p>输入新增内容&hellip;</p>
            <!-- general form elements -->
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">
                  <!-- Quick Example -->
                  事件项
                </h3>
              </div>
              <!-- /.card-header -->
              <!-- form start -->
              <form @submit.prevent="handleSubmit">
                <div class="card-body">
                  <div class="form-group">
                    <label for="exampleInputEmail1">
                      <!-- Email address -->
                      待办名
                    </label><!-- :value="itemName1"  -->
                    <input type="text" class="form-control" id="itemName1" 
                    name="itemName1" placeholder="事件名">
                  </div> 
                  <div class="form-group">
                    <label for="exampleInputEmail1">
                      <!-- Email address -->
                      日期
                    </label>
                    <input type="text" class="form-control" id="itemDate1" name="itemDate1"
                      :value="date1" placeholder="Enter email" disabled>
                  </div> 
                  <div class="form-group">
                    <label for="exampleInputEmail1">
                      <!-- Email address -->
                      备注
                    </label><!-- :value="itemRemark1" -->
                    <input type="text" class="form-control" id="itemRemark1" 
                      name="itemRemark1" placeholder="输入备注">
                  </div> 
                  <div class="form-check">
                    <input type="radio" class="form-check-input" v-model="picked" 
                      value="仅标题"
                    id="a1">
                    <label class="form-check-label" for="exampleCheck1">仅标题</label>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" class="form-check-input" v-model="picked" 
                      value="多选项"
                    id="a2">
                    <label class="form-check-label" for="exampleCheck1">多选项</label>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <input type="radio" class="form-check-input" v-model="picked" 
                      value="有内容"
                    id="a3">
                    <label class="form-check-label" for="exampleCheck1">有内容</label>
                  </div>
                  <div>{{ picked }}</div>
                  <div v-if="picked == '多选项'">1
                    <input v-model="msg" placeholder="输入选项">
                    <a href="#" @click="addCheck1">添加</a>
                    <div>{{ pickArr1 }}</div>
                  </div>
                  <div v-if="picked == '有内容'">
                    <textarea v-model="content1" placeholder="输入内容"></textarea>
                  </div>
                </div>
                <!-- /.card-body -->

                <div class="card-footer">
                  <button type="submit" class="btn btn-primary">提交</button>
                </div>
              </form>
            </div>
            <!-- /.card -->


        </div>
        <!--
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
        -->
      </div>
      <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
  </div>
  <!-- /.modal -->


</div>
<!-- ./wrapper -->

<!-- REQUIRED SCRIPTS -->

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="js/adminlte.min.js"></script>
<script src="js/vue.min.js"></script> 
</body>
<script type="text/javascript">

  
  function formatDateToYYYYMMDDHHMMSS(date) {
      let year = date.getFullYear();
      let month = String(date.getMonth() + 1).padStart(2, '0');
      let day = String(date.getDate()).padStart(2, '0');
      let hours = String(date.getHours()).padStart(2, '0');
      let minutes = String(date.getMinutes()).padStart(2, '0');
      let seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  }

  function generateRandomCode(length = 10) {
      const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let code = '';

      for (let i = 0; i < length; i++) {
          const randomIndex = Math.floor(Math.random() * characters.length);
          code += characters[randomIndex];
      }

      return code;
  }

  // 示例：生成一个十位编码
  //const randomCode = generateRandomCode(10);
  //console.log(randomCode); // 输出类似 "aB3dE7fG9H"

  new Vue({
    el:'#test1App',
    data(){
      return {
        msg: 'abc',
        date1: '',
        itemName1: '',
        itemRemark1: '',
        picked: '',
        project1: '',
        pickArr1: [],
        proList1: [],
        itemList1: [],
        content1: '',
        remark1: ''
      }
    },
    created(){
    },
    mounted(){
      this.msg = ''

      this.initialData()
    },
    methods: {
      one(){},
      edit(e){},
      del1(e){},      
      getStatusName(e){
        if(e=='1'){
          return '想做'
        }else if(e=='2'){
          return '在做'
        }else if(e=='3'){
          return '遇困'
        }else if(e=='4'){
          return '完成'
        }
      },
      initialData(){
        console.log("initialData()")


        let projectArr1 = localStorage.getItem('projList');
        console.log("projectArr1-=>",projectArr1)
        if(projectArr1 == null || projectArr1 == '' || projectArr1 == undefined){
          return;
        }else{
          let objArr1 = JSON.parse(projectArr1)
          for(item1 of objArr1){
            console.log("initialData item1-=>",item1)
            this.proList1.push(item1.name)
          }
          this.project1 = this.proList1[0]
        }

        this.getItemList()

      },
      getItemList(){

        if(this.project1 == ''){
          return
        }

        let itemArr2 = localStorage.getItem('itemList')
        if(itemArr2 == null || itemArr2 == '' || itemArr2 == undefined){
          return
        }else{
          let objArr2 = JSON.parse(itemArr2)
          console.log("getItemList objArr2-=>",objArr2)
          for(item2 of objArr2){
            console.log("getItemList item2-=>",item2)
            if(item2.proId == this.project1){
              this.itemList1.push(item2)  
            }
          }
        }
      },
      addCheck1(){
        console.log('addCheck1()',this.msg)
        this.pickArr1.push(this.msg)
        this.msg = ''

      },
      addItem(){
        console.log("addItem()")
        this.date1 = formatDateToYYYYMMDDHHMMSS(new Date());
        this.picked = ''
        this.content1 = ''
        this.pickArr1 = new Array()
        //this.itemName1 = ''
        //this.itemRemark1 = ''
        $('#itemName1').val('')
        $('#itemRemark1').val('')
        $('#modal-addItem').modal('show')

      },
      changeIndex(e){
        console.log("changeIndex e-=>",e)
        console.log(e.target.value)
      },
      handleSubmit(e){
        console.log("handleSubmit()",e)

        console.log("param1",this.itemName1,this.date1,this.remark1,this.picked)

        let form1 = e.target;
        let ele1 = form1.elements

        let formData = new FormData(form1);
        //console.log("formData-=>",formData)

        //console.log("ele1-=>",ele1)
        console.log("ele1.itemName1.value-=>", ele1.itemName1.value)
        console.log("ele1.itemDate1.value-=>", ele1.itemDate1.value)
        console.log("ele1.itemRemark1.value-=>", ele1.itemRemark1.value)


        let itemName1a = formData.get('itemName1');
        let itemRemark1a = formData.get('itemRemark1');
        console.log("itemName1a,itemRemark1a-=>",itemName1a,itemRemark1a)
        console.log("project1-=>",this.project1)
        if(itemName1a == null || itemName1a == '' || itemName1a == undefined){
          $(document).Toasts('create', {
            title: '空值提示',
            autohide: true,
            delay: 1000,
            body: '事件名不可为空........'
          })
          return
        }

        if(this.picked == null || this.picked == '' || this.picked == undefined){
          $(document).Toasts('create', {
            title: '空值提示',
            autohide: true,
            delay: 1000,
            body: '事件类型不可为空........'
          })
          return
        }

        let obj1 = {}
        obj1.id = generateRandomCode(20)
        obj1.name = itemName1a
        obj1.date1 = this.date1
        obj1.remark1 = itemRemark1a
        obj1.type1 = this.picked
        obj1.status = 1
        obj1.proId = this.project1
        this.saveToDb(obj1)

        $('#modal-addItem').modal('toggle')
      },
      saveToDb(e){
        console.log("saveToDb e-=>",e)

        this.itemList1.push(e)
        console.log("this.itemList1-=>",this.itemList1)

        let strArr1 = JSON.stringify(this.itemList1)
        console.log("strArr1-=>",strArr1)
        localStorage.setItem('itemList',strArr1);
      },
      indexPage(){}
    }
  })
/*

*/  
</script>
</html>
